<link href="{$static_path}/shearphoto/css/ShearPhoto.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
    var SHEAR = {
        PATH_RES: "{$static_path}",
        PATH_AVATAR: "{$attr_data.jcrop.upload_path}",
        URL: "{$attr_data.jcrop.upload_url}",
        JCROP_ID: "{$attr_data.jcrop.id}"
    };
</script>
<div class="modal fade" id="{$attr_data.jcrop.id}_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:70%;">
        <div class="modal-content" style="min-width:450px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">{$attr_data.jcrop.title}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="shearphoto_loading">程序加载中......</div>
                        <div id="shearphoto_main">
                            <div class="Effects" id="shearphoto_Effects" autocomplete="off">
                                <strong class="EffectsStrong">截图效果</strong>
                                <a href="javascript:;" StrEvent="原图" class="Aclick"><img src="{$static_path}/shearphoto/images/Effects/e0.jpg"/>原图</a>
                                <a href="javascript:;" StrEvent="美肤"><img src="{$static_path}/shearphoto/images/Effects/e1.jpg"/>美肤效果</a>
                                <a href="javascript:;" StrEvent="素描"><img src="{$static_path}/shearphoto/images/Effects/e2.jpg"/>素描效果</a>
                                <a href="javascript:;" StrEvent="自然增强"><img src="{$static_path}/shearphoto/images/Effects/e3.jpg"/>自然增强</a>
                                <a href="javascript:;" StrEvent="紫调"><img src="{$static_path}/shearphoto/images/Effects/e4.jpg"/>紫调效果</a>
                                <a href="javascript:;" StrEvent="柔焦"><img src="{$static_path}/shearphoto/images/Effects/e5.jpg"/>柔焦效果</a>
                                <a href="javascript:;" StrEvent="复古"><img src="{$static_path}/shearphoto/images/Effects/e6.jpg"/>复古效果</a>
                                <a href="javascript:;" StrEvent="黑白"><img src="{$static_path}/shearphoto/images/Effects/e7.jpg"/>黑白效果</a>
                                <a href="javascript:;" StrEvent="仿lomo"><img src="{$static_path}/shearphoto/images/Effects/e8.jpg"/>仿lomo</a>
                                <a href="javascript:;" StrEvent="亮白增强"><img src="{$static_path}/shearphoto/images/Effects/e9.jpg"/>亮白增强</a>
                                <a href="javascript:;" StrEvent="灰白"><img src="{$static_path}/shearphoto/images/Effects/e10.jpg"/>灰白效果</a>
                                <a href="javascript:;" StrEvent="灰色"><img src="{$static_path}/shearphoto/images/Effects/e11.jpg"/>灰色效果</a>
                                <a href="javascript:;" StrEvent="暖秋"><img src="{$static_path}/shearphoto/images/Effects/e12.jpg"/>暖秋效果</a>
                                <a href="javascript:;" StrEvent="木雕"><img src="{$static_path}/shearphoto/images/Effects/e13.jpg"/>木雕效果</a>
                                <a href="javascript:;" StrEvent="粗糙"><img src="{$static_path}/shearphoto/images/Effects/e14.jpg"/>粗糙效果</a>
                            </div>
                            <div class="primary">
                                <div id="main">
                                    <div class="point">
                                    </div>
                                    <div id="SelectBox">
                                        <form id="ShearPhotoForm" enctype="multipart/form-data" method="post" target="POSTiframe">
                                            <input name="shearphoto" type="hidden" value="123" autocomplete="off">
                                            <a href="javascript:;" id="selectImage"><input type="file" name="UpFile" autocomplete="off"/></a>
                                        </form>
                                        <a href="javascript:;" id="PhotoLoading"></a>
                                    </div>
                                    <div id="relat">
                                        <div id="black">
                                        </div>
                                        <div id="movebox">
                                            <div id="smallbox">
                                                <img src="{$static_path}/shearphoto/images/default.gif" class="MoveImg"/>
                                            </div>
                                            <i id="borderTop"></i>
                                            <i id="borderLeft"></i>
                                            <i id="borderRight"></i>
                                            <i id="borderBottom"></i>
                                            <i id="BottomRight"></i>
                                            <i id="TopRight"></i>
                                            <i id="Bottomleft"></i>
                                            <i id="Topleft"></i>
                                            <i id="Topmiddle"></i>
                                            <i id="leftmiddle"></i>
                                            <i id="Rightmiddle"></i>
                                            <i id="Bottommiddle"></i>
                                        </div>
                                        <img src="{$static_path}/shearphoto/images/default.gif" class="BigImg"/>
                                    </div>
                                </div>
                                <div style="clear: both"></div>
                                <div id="Shearbar">
                                    <a id="LeftRotate" href="javascript:;"><em></em>向左旋转</a>
                                    <em class="hint L"></em>
                                    <div class="ZoomDist" id="ZoomDist">
                                        <div id="Zoomcentre"></div>
                                        <div id="ZoomBar"></div>
                                        <span class="progress"></span>
                                    </div>
                                    <em class="hint R"></em>
                                    <a id="RightRotate" href="javascript:;">向右旋转<em></em></a>
                                    <p class="Psava">
                                        <a id="againIMG" href="javascript:;">重新选择</a>
                                        <a id="saveShear" href="javascript:;">保存截图</a>
                                    </p>
                                </div>
                            </div>
                            <div style="clear: both"></div>
                        </div>
                        <div id="photoalbum">
                            <h1>请从相册中选择</h1>
                            <i id="close"></i>
                            <ul>
                                <li><img src="{$static_path}/shearphoto/file/photo/1.jpg" serveUrl="file/photo/1.jpg"/>
                                </li>
                                <li><img src="{$static_path}/shearphoto/file/photo/2.jpg" serveUrl="file/photo/2.jpg"/>
                                </li>
                                <li><img src="{$static_path}/shearphoto/file/photo/3.jpg" serveUrl="file/photo/3.jpg"/>
                                </li>
                                <li><img src="{$static_path}/shearphoto/file/photo/4.jpg" serveUrl="file/photo/4.jpg"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>